<template>
  <div class="layout">
    <div :style="bigScreenStyle">
      <widget-viewer
        v-for="(widget, index) in widgets"
        :key="index"
        v-model="widget.value"
        :type="widget.type"
      />
    </div>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import WidgetViewer from "../designer/widget/widgetViewer";
export default {
  name: "AjReportScreenViewerIndex",
  components: {
    WidgetViewer
  },
  data() {
    return {
      bigScreenStyle: {},
      widgets: [],
      url: {
        queryDashboardByRcode: '/ajreport/dashboard/queryByRcode',
      }
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      getAction(this.url.queryDashboardByRcode, { rcode: this.$route.query.rcode}).then(res => {
        const equipment = document.body.clientWidth;
        const ratioEquipment = equipment / res.result.width;
        this.bigScreenStyle = {
          width: res.result.width + "px",
          height: res.result.height + "px",
          position: 'absolute',
          zIndex: -1,
          "background-color": res.result.backgroundColor,
          "background-image": "url(" + res.result.backgroundImage + ")",
          "background-position": "0% 0%",
          "background-size": "100% 100%",
          "background-repeat": "initial",
          "background-attachment": "initial",
          "background-origin": "initial",
          "background-clip": "initial",
          transform: `scale(${ratioEquipment}, ${ratioEquipment})`,
          "transform-origin": "0 0",
          "position": "relative"
        };
        this.widgets = res.result.widgets.map(item => {
          item.options = JSON.parse(item.options)
          item.value = JSON.parse(item.value)
          return item
        })
        console.log(this.widgets)
      })
    }
  }
}
</script>

<style scoped lang="less">
.layout {
  width: 100%;
  height: 100%;
  text-align: center;
}
.bottom-text {
  width: 100%;
  color: #a0a0a0;
  position: fixed;
  bottom: 16px;
  z-index: 9999;
}
</style>
